<template>
  <div>
    <div class="action-wrap">
      <div
        class="action-wrap__item"
        :class="action.type"
        v-for="(action, index) of actionList"
        @click="onClickAvatar(action)"
        :key="index"
      >
        <image mode="widthFix" :src="action.image"></image>
        <text>{{ action.title }}</text>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"

export default {
  computed: {
    ...mapGetters("user", ["isAuth", "userInfo"]),
  },
  data() {
    return {
      actionList: [
        {
          type: "test",
          image: "/static/image/home/real.svg",
          title: "开始做题",
          url: "/pages/subject/index",
        },
        {
          type: "wrong",
          image: "/static/image/home/test.svg",
          title: "错题集",
          url: "/pages/question/wrong",
        },
        {
          type: "rank",
          image: "/static/image/home/rank.svg",
          title: "排行榜",
          url: "/pages/rank/index",
        },
      ],
    }
  },
  methods: {
    // 跳转到对应页面
    onClickAvatar(action) {
      if (this.isAuth) {
        const { url } = action
        uni.navigateTo({ url })
      } else {
        uni.showToast({ title: "请点击头像登录", icon: "none" })
      }
    },
  },
}
</script>

<style scoped lang="scss">
.action-wrap {
  display: grid;

  margin-top: 60rpx;

  gap: 30rpx;
  grid-template-areas:
    "rank rank rank test test"
    "rank rank rank test test"
    "wrong wrong wrong test test"
    "wrong wrong wrong test test";

  &__item {
    position: relative;

    border-radius: 10px;
    padding: 32rpx 32rpx;

    font-size: 36rpx;
    font-weight: 600;

    background: #ecf0f3;

    box-shadow: 6px 6px 12px #c2c2c6, -6px -6px 12px #ffffff;

    transition: box-shadow 0.25s ease !important;
    &.test {
      grid-area: test;
      image {
        position: absolute;
        right: 0px;
        bottom: -12px;

        width: 100px;

        opacity: 0.85;
      }
    }
    &.wrong {
      padding-bottom: 84rpx;

      grid-area: wrong;
      image {
        position: absolute;
        right: 0px;
        bottom: 0px;

        width: 100rpx;

        opacity: 0.85;
      }
    }
    &.rank {
      padding-bottom: 84rpx;

      grid-area: rank;
      image {
        position: absolute;
        right: 0px;
        bottom: 0px;

        width: 100rpx;

        opacity: 0.85;
      }
    }

    &:active {
      background: #ecf0f3;

      box-shadow: inset 12px 12px 24px #d3d3d7, inset -12px -12px 24px #ffffff;
    }
  }
}
</style>
